<!-- 空状态组件 -->
<template>
  <view class="empty-state">
    <view class="empty-icon">
      <uni-icons :type="iconType" size="80" color="#ccc" />
    </view>
    <view class="empty-title">{{ title }}</view>
    <view class="empty-description" v-if="description">{{ description }}</view>

  </view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue';
  const props = defineProps({
    type: {
      type: String,
      default: 'no-data', // no-data, no-network, error
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    buttonText: {
      type: String,
      default: '重试'
    },
    showButton: {
      type: Boolean,
      default: false
    }
  });

  const emit = defineEmits(['button-click']);

  const iconType = computed(() => {
    switch (props.type) {
      case 'no-network':
        return 'wifi-off';
      case 'error':
        return 'close-circle';
      case 'no-data':
      default:
        return 'list';
    }
  });

  const handleButtonClick = () => {
    emit('button-click');
  };
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  min-height: 400rpx;
}

.empty-icon {
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-title {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 16rpx;
  text-align: center;
}

.empty-description {
  font-size: 28rpx;
  color: #999;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 40rpx;
}

.empty-button {
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  
  &:active {
    opacity: 0.8;
  }
}
</style>

